<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
        div {
            float: left;
            width: 100px;
            height: 30px;
            background: orange;
            text-align: center;
            line-height: 30px;
            position: absolute;
            top: 200px;
            left: 200px;
            -webkit-？: top left;
            -moz-？: top left;
            transform-origin: top left;
            color: white;
        }

        .wrapper {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
        }

        .wrapper2 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(30deg)skew(15deg);
        }

        .wrapper3 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(60deg)skew(15deg);
        }

        .wrapper4 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(90deg)skew(15deg);
        }

        .wrapper5 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(120deg)skew(15deg);
        }

        .wrapper6 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(150deg)skew(15deg);
        }

        .wrapper7 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(180deg)skew(15deg);
        }

        .wrapper8 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(210deg)skew(15deg);
        }

        .wrapper9 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(240deg)skew(15deg);
        }

        .wrapper10 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(270deg)skew(15deg);
        }

        .wrapper11 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(300deg)skew(15deg);
        }

        .wrapper12 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(330deg)skew(15deg);
        }

        .wrapper13 {
            -webkit-transform: skew(15deg);
            -moz-transform: skew(15deg);
            transform: rotate(30deg)skew(15deg);
        }
    </style>
</head>

<body>
    <div class="wrapper"></div>
    <div class="wrapper2"></div>
    <div class="wrapper3"></div>
    <div class="wrapper4"></div>
    <div class="wrapper5"></div>
    <div class="wrapper6"></div>
    <div class="wrapper7"></div>
    <div class="wrapper8"></div>
    <div class="wrapper9"></div>
    <div class="wrapper10"></div>
    <div class="wrapper11"></div>
    <div class="wrapper12"></div>
    <div class="wrapper13"></div>
</body>

</html>